import React, { useEffect } from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import { loginAction } from '../store/actions'
import { connect } from 'react-redux'
import md5 from 'md5'

function Login(props) {
  console.log(props)
  useEffect(() => {
    // testApi()
  }, [])
  const onFinish = (values) => {
    // console.log('Success:', values);
    let obj = {}
    obj.userName = values.userName;
    obj.passwordMd5 = md5(values.passwordMd5)
    props.dispatch(loginAction(obj)).then(data => {
      console.log('data', data)
      props.history.replace('/')
    })
  };

  const onFinishFailed = (errorInfo) => {
    // console.log('Failed:', errorInfo);
  };

  return (
    <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="userName"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="passwordMd5"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>
  );
}
Login = connect(() => ({}), dispatch => {
  return {
    dispatch
  }
})(Login)
export default Login